<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        姓: <input type="text" placeholder="fName" v-model="fName"><br>
        名: <input type="text" placeholder="lName" v-model="lName"><br>
        姓名1: <input type="text" placeholder="fullName1" v-model="fullName1"><br>
        姓名2: <input type="text" placeholder="fullName2" v-model="fullName2"><br>
        姓名3: <input type="text" placeholder="fullName3" v-model="fullName3"><br>
    </div>
</body>
<script src="../../public/vue.dev.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            fName:'mei',
            lName:' dy',
            // fullName1:fName + lName, xx 错误写法，需要用到data中原有数据须在compute中写书写
            fullName2:'mei dy',
        },
        computed:{

            // 单向绑定 computed + watch
            fullName1(){
                return this.fName + this.lName;
            },

            // 双向绑定 get set是在特定html model下实现split
            fullName3: {
                // 回调函数： 1.你定义的 2.你没有调用 3.但最终它执行了 一定条件下自动触发的函数
                get(){
                    return this.fName + ' ' + this.lName;
                },

                set(val){
                    new_val = val.split(' ');
                    this.fName = new_val[0];
                    this.lName = new_val[1];
                }
            }

        },

        watch: {
            fName:function (val) {
                console.log(val);
                console.log(this);
                this.fullName2 =  val + ' ' + this.lName;
            },
            lName:function (val) {
                this.fullName2 =  this.fName + ' ' + val;
            }
        }
    });
    // console.log(vm);

    /*
    * 计算属性 和 监视
    * tips: 计算属性是直接计算用户输入所得数据 监听是监听元素数值变化 然后计算所得值
    * computed + watch可以看做是data{} 里数据的变相写法，变相赋值data{}
    * 计算属性computed 计算data中数据运算，有一个返回值
    * 计算属性存在缓存，多次读取只执行一次getter计算
    *
    * */
</script>

</html>